import React, { JSX } from 'react';
import { NulDialog, NulCommonOperations, NulFormItem } from '../../components/NulDialog';
import { FormControl, MenuItem, Select, TextField, Autocomplete } from '@mui/material';
import { useAppDispatch } from '../../actions/hook';
import { WarehouseStatus, createWarehouse } from '../../actions/WarehouseManagement';
import { UserEntry } from '../../actions/UserManagement';
import '@fontsource/open-sans';

interface CreateWarehouseProps {
  open: boolean;
  onClose: () => void;
  userEntries: UserEntry[];
}

function CreateWarehouse(props: CreateWarehouseProps): JSX.Element {
  const { open, onClose, userEntries } = props;

  const [name, setName] = React.useState<string>('');
  const [type, setType] = React.useState<string>('');
  const [address, setAddress] = React.useState<string>('');
  const [status, setStatus] = React.useState<WarehouseStatus>('open');

  const [selectedUserEntry, setSelectedUserEntry] = React.useState<UserEntry | null>(null);

  const dispatch = useAppDispatch();

  const clear = () => {
    setName('');
    setType('');
    setAddress('');
    setStatus('open');
    setSelectedUserEntry(null);
  }

  const onCreateClicked = () => {
    if (selectedUserEntry !== null) {
      dispatch(createWarehouse({ name, type, address, status, authority: selectedUserEntry.id }));
      onClose();
      clear();
    }
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Create New Warehouse'
      operations={
        <NulCommonOperations
          onPositiveClicked={onCreateClicked}
          onNegativeClicked={onClose}
          positiveText='Create'
        />
      }
    >
      <NulFormItem hint='Name' component={
        <TextField placeholder='Name' fullWidth={true} size='small' value={name} onChange={(event) => { setName(event.target.value); }} />
      } />
      <NulFormItem hint='Type' component={
        <TextField placeholder='Type' fullWidth={true} size='small' value={type} onChange={(event) => { setType(event.target.value); }} />
      } />
      <NulFormItem hint='Address' component={
        <TextField placeholder='Address' fullWidth={true} size='small' value={address} onChange={(event) => { setAddress(event.target.value); }} />
      } />
      <NulFormItem hint='Status' component={
        <FormControl fullWidth size='small'>
          <Select
            value={status}
            placeholder="Type"
            onChange={(event) => {
              if (event.target.value === 'open' || event.target.value === 'closed' || event.target.value === 'suspended') {
                setStatus(event.target.value);
              }
            }}
          >
            <MenuItem value='open'>Open</MenuItem>
            <MenuItem value='closed'>Closed</MenuItem>
            <MenuItem value='suspended'>Suspended</MenuItem>
          </Select>
        </FormControl>
      } />
      <NulFormItem hint='Authority' component={
        <FormControl fullWidth size='small'>
          <Autocomplete
            options={userEntries}
            size='small'
            fullWidth={true}
            getOptionLabel={option => option.userName}
            renderInput={(params) => <TextField {...params} />}
            value={selectedUserEntry}
            onChange={(event, value) => {
              setSelectedUserEntry(value);
            }}
          />
        </FormControl>
      } />
    </NulDialog>
  );
}

export { CreateWarehouse };